<template>
    <view class="page">
        <!-- 订单状态 -->
        <view class="order-status">
            <view class="back" @click="onBack">
                <text></text>
            </view>
            <view class="status">
                <text class="iconfont icon-zhuyi"></text>
                <text>{{selectDictLabel(stateList,data.order_state)}}</text>
            </view>
            <!-- <view class="reason">
                <text>剩余12分68秒</text>
            </view> -->
        </view>
        <!-- 收货地址 -->
        <view class="shipping-address">
            <view class="name-phone">
                <!-- <text class="iconfont icon-dingwei"></text> -->
                <text>{{data.address_name}}</text>
                <text>{{ data.address_mobile }}</text>
            </view>
            <view class="address">
                <text>{{ data.address_province + data.address_city + data.address_area + data.address_detailed }}</text>
            </view>
        </view>
        <!-- 订单商品 -->
        <view class="order-goods">
            <view class="goods-list">
                <view class="list">
                    <view class="thumb">
                        <image :src="data.cover_pict" mode="widthFix"></image>
                    </view>
                    <view class="item">
                        <view class="title">
                            <text class="one-omit">{{ data.name }}</text>
                        </view>
                        <!-- <view class="num-size">
                            <text>数量：88</text>
                            <text>颜色：黑色,XL,全国联保</text>
                        </view> -->
                        <view class="price">
                            <text>￥{{data.pay_price}}</text>
                        </view>
                        <!-- <view class="order-btn">
                            <view class="btn" @click="onApplyAftersales">
                                <text>申请售后</text>
                            </view>
                        </view> -->
                    </view>
                </view>
            </view>
            <!-- <view class="contact" @tap='toChatPage()'>
                <text class="iconfont icon-kefu"></text>
                <text>联系客服</text>
            </view> -->
        </view>
        <!-- 订单信息 -->
        <view class="order-info">
            <view class="info-list">
                <view class="list">
                    <view class="title">订单编号:</view>
                    <view class="content">
                        <text>{{ data.order_no }}</text>
                        <text class="btn" @click="copy()">复制</text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">服务时间:</view>
                    <view class="content">
                        <text>{{data.service_time}}</text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">下单时间:</view>
                    <view class="content">
                        <text>{{data.pay_success_time}}</text>
                    </view>
                </view>
                <!-- <view class="list">
                    <view class="title">服务时长:</view>
                    <view class="content">
                        <text>{{data.service_duration}}分钟</text>
                    </view>
                </view> -->
                <view class="list">
                    <view class="title">支付方式:</view>
                    <view class="content">
                        <text>{{selectDictLabel(payType,data.pay_type)}}</text>
                    </view>
                </view>
                <view class="list" v-if="data.order_state===2 || data.order_state===1">
                    <view class="title">接单时间:</view>
                    <view class="content">
                        <text>{{data.receiv_time}}</text>
                    </view>
                </view>
                <view class="list" v-if="data.order_state===2">
                    <view class="title">完成时间:</view>
                    <view class="content">
                        <text>{{data.complete_time}}</text>
                    </view>
                </view>
                <view class="list" v-if="data.order_state===2">
                    <view class="title">实际服务时长:</view>
                    <view class="content">
                        <text>{{data.service_duration_reality?data.service_duration_reality:''}}分钟</text>
                    </view>
                </view>

                <view class="list" v-if="data.order_state===2">
                    <view class="title">服务完成码:</view>
                    <view class="content">
                        <text style="color: #e8380d;">{{data.service_code}}</text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">服务人员性别:</view>
                    <view class="content">
                        <text>{{selectDictLabel(sexType,data.service_sex)}}</text>
                    </view>
                </view>

                <view class="list">
                    <view class="title">备注:</view>
                    <view class="content">
                        <text>{{data.service_tips}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 订单明细 -->
        <view class="order-details">
            <view class="details-list">
                <!-- <view class="list">
                    <view class="title">
                        <text>商品总额</text>
                    </view>
                    <view class="price">
                        <text>￥{{299.00}}</text>
                    </view>
                </view>
                <view class="list">
                    <view class="title">
                        <text>运费</text>
                    </view>
                    <view class="price">
                        <text>+￥20.00</text>
                    </view>
                </view> -->
                <view class="list action">
                    <view class="title">
                        <text>实付款：</text>
                    </view>
                    <view class="price">
                        <text>￥{{data.pay_price}}</text>
                    </view>
                </view>
            </view>
        </view>
        <!-- 底部按钮 -->
        <view class="footer-btn">
            <view class="del">
                <!-- <text>删除订单</text> -->
            </view>
            <view class="btn">
                <!-- <text>查看发票</text>
                <text class="action">确认付款</text> -->

                <text v-if="data.order_state===0" @click="receive">立即接单</text>
                <!-- <text v-if="data.order_state===1" @click="distribute">完成服务</text> -->
               <!-- <text v-if="data.order_state===2"  @click="distribute">完成凭证</text> -->
            </view>
        </view>

        <DialogBox ref="DialogBox"></DialogBox>
        <loading :show="loading"></loading>
    </view>
</template>

<script>
    import {
        serviceState,
        payType,
        sexArray
    } from "@/api/dictionary.js"
    import {
        getOrdersInfo,
        receiveOrders,
    } from "@/api/order.js"
    export default {
        data() {
            return {
                loading: false,
                stateList: serviceState,
                data: {},
                data0: {},
                orderNo: "",
                payType: payType,
                sexType: sexArray,
            }
        },

        onLoad(params) {
            // this.orderNo = params.orderNo
            this.data0 = JSON.parse(decodeURIComponent(params.data))
            this.getList()
        },
        methods: {
            /**
             * 返回点击
             */
            onBack() {
                uni.navigateBack();
            },
            getList() {
                this.loading = true
                getOrdersInfo({
                    order_no: this.data0.order_no
                }).then(res => {
                    this.data = res.data
                    // this.data.cover_pict = this.data0.cover_pict;
                    // this.data.name = this.data0.name
                    // this.data.service_duration = this.data0.service_duration
                    console.log(this.data, "hahha")
                    this.loading = false
                })
            },
            receive() {
                this.$refs['DialogBox'].confirm({
                    title: '提示',
                    content: '是否要立即接单?',
                    DialogType: 'inquiry',
                    animation: 0
                }).then(() => {
                    receiveOrders({
                        order_no: this.data0.order_no
                    }).then(res => {
                        if (res.code == 1) {
                            this.$message(res.info)
                            this.$refs.paging.reload();

                        }
                    })
                })
            },
            distribute(item) {
                // this.order_no = id
                uni.navigateTo({
                    url: '/pagesB/confirmOrder/confirmOrder?data=' + encodeURIComponent(JSON.stringify(item)),
                })
                // this.$refs.popup.open('center')
            },
            // cancle() {
            //     this.$refs['DialogBox'].confirm({
            //         title: '提示',
            //         content: '是否要取消订单?',
            //         DialogType: 'inquiry',
            //         animation: 0
            //     }).then(() => {
            //         setServiceOrderToCancel({
            //             order_no: this.orderNo
            //         }).then(res => {
            //             if (res.code == 1) {
            //                 uni.navigateBack({
            //                     delta: 1,
            //                 })
            //                 this.$message("已取消订单")
            //             }
            //         })
            //     }).catch(err => {
            //         console.log(err);
            //     })
            // },
            // del() {
            //     this.$refs['DialogBox'].confirm({
            //         title: '提示',
            //         content: '是否要删除订单?',
            //         DialogType: 'inquiry',
            //         animation: 0
            //     }).then(() => {
            //         setServiceOrderToDel({
            //             order_no: this.orderNo
            //         }).then(res => {
            //             if (res.code == 1) {
            //                 uni.navigateBack({
            //                     delta: 1,
            //                 })
            //                 this.$message("已删除订单")
            //             }
            //         })
            //     }).catch(err => {
            //         console.log(err);
            //     })
            // },
            /**
             * 售后点击
             */
            onApplyAftersales() {
                uni.navigateTo({
                    url: '/pages/AfterSaleType/AfterSaleType',
                })
            },
            // 复制
            copy() {
                uni.setClipboardData({
                    data: this.data.order_no,
                    success: () => {}
                });
            },
            toChatPage() {
                // console.log(">>>>>>>>>执行进入chat页面")
                // var nameList = {
                //     myName: "test1",
                //     your: "busin_1_staff_9"
                // }
                // uni.navigateTo({
                //     url: "/pagesA/chatroom/chatroom?username=" + JSON.stringify(nameList),
                // });
                if (!uni.getStorageSync('token')) {
                    uni.navigateTo({
                        url: "/pages/login/index"
                    })
                } else {
                    wx.openCustomerServiceChat({
                        extInfo: {
                            url: 'https://work.weixin.qq.com/kfid/kfc54cbfbf7f9369805' //客服ID
                        },
                        corpId: "ww4d9a453b47317369", //企业微信ID
                        success(res) {
                            console.log(res, 789)
                        }
                    })
                }
            },
        }
    }
</script>

<style scoped lang="scss">
    .page {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #f6f6f6;
    }

    /* 订单状态 */
    .order-status {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 200rpx;
        background: linear-gradient(to right, $base, $change-clor);
        /* #ifdef APP-PLUS */
        height: calc(100rpx + var(--status-bar-height));
        padding-top: var(--status-bar-height);
        /* #endif */
        /* #ifdef MP-WEIXIN */
        height: calc(100rpx + var(--status-bar-height));
        padding-top: 20rpx;

        /* #endif */
        .back {
            position: absolute;
            left: 0;
            top: 0;
            /* #ifdef APP-PLUS */
            padding-top: var(--status-bar-height);
            /* #endif */
            /* #ifdef MP-WEIXIN */
            padding-top: 20rpx;
            /* #endif */
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100rpx;
            height: 100%;

            text {
                width: 20rpx;
                height: 20rpx;
                border-left: 2rpx solid #ffffff;
                border-bottom: 2rpx solid #ffffff;
                transform: rotate(45deg);
            }
        }

        .status {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100rpx;

            text {
                font-size: 38rpx;
                // font-weight: bold;
                color: #ffffff;
            }

            .iconfont {
                margin-right: 20rpx;
            }
        }

        .reason {
            display: flex;
            // align-items: center;
            justify-content: center;
            width: 100%;
            height: 80rpx;

            text {
                font-size: 28rpx;
                color: #f6f6f6;
            }
        }
    }

    /* 收货地址 */
    .shipping-address {
        width: 100%;
        //   height: 200rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        margin: 180rpx auto 20rpx;
        padding: 20rpx 0;

        .name-phone {
            display: flex;
            align-items: center;
            padding: 0 30rpx 10rpx;

            text {
                font-size: 28rpx;
                font-weight: bold;
                color: #222222;
                margin-right: 20rpx;
            }
        }

        .address {
            display: flex;
            padding: 0 30rpx;
            // margin-left: 50rpx;

            text {
                font-size: 26rpx;
                color: #959595;
            }
        }
    }

    /* 订单商品 */
    .order-goods {
        width: 100%;
        background-color: #ffffff;
        border-radius: 20rpx;

        .goods-list {
            padding: 0 4%;

            .list {
                display: flex;
                align-items: center;
                width: 100%;

                .thumb {
                    display: flex;
                    width: 22%;
                    padding: 20rpx 0;

                    image {
                        width: 120rpx;
                        //   height: 120rpx;
                        border-radius: 10rpx;
                    }
                }

                .item {
                    width: 75%;
                    height: 100%;

                    .title {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 60rpx;

                        text {
                            font-size: 26rpx;
                            color: #222222;
                        }
                    }

                    .num-size {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 60rpx;

                        text {
                            font-size: 26rpx;
                            color: #959595;
                            margin-right: 20rpx;
                        }

                        text:last-child {
                            margin-right: 0;
                        }
                    }

                    .price {
                        display: flex;
                        align-items: center;
                        width: 100%;
                        height: 60rpx;

                        text {
                            font-size: 28rpx;
                            font-weight: bold;
                            color: #222222;
                        }
                    }

                    .order-btn {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        width: 100%;
                        height: 100rpx;

                        .btn {
                            padding: 10rpx 30rpx;
                            color: #555555;
                            font-size: 26rpx;
                            border: 2rpx solid #eeeeee;
                            border-radius: 100rpx;
                        }
                    }

                    .order-btn {
                        display: flex;
                        align-items: center;
                        justify-content: flex-end;
                        width: 100%;
                        height: 100rpx;

                        .btn {
                            padding: 10rpx 30rpx;
                            color: #555555;
                            font-size: 26rpx;
                            border: 2rpx solid #eeeeee;
                            border-radius: 100rpx;
                        }
                    }
                }
            }
        }

        .contact {
            display: flex;
            align-items: center;
            justify-content: center;
            display: flex;
            align-items: center;
            width: 100%;
            height: 100rpx;
            background-color: #ffffff;
            box-shadow: 0 0 20rpx #eeeeee;
            border-radius: 0 0 20rpx 20rpx;

            text {
                font-size: 28rpx;
                color: #555555;
            }

            .iconfont {
                font-size: 34rpx;
                margin-right: 20rpx;
            }
        }
    }

    /* 订单信息 */
    .order-info {
        width: 100%;
        background-color: #ffffff;
        border-radius: 20rpx;
        margin: 20rpx auto;

        .info-list {
            padding: 0 4%;

            .list {
                display: flex;
                align-items: center;
                width: 100%;
                height: 100rpx;
                border-bottom: 2rpx solid #f6f6f6;

                .title {
                    font-size: 26rpx;
                    color: #959595;
                }

                .content {
                    display: flex;
                    align-items: center;
                    margin-left: 20rpx;

                    text {
                        font-size: 26rpx;
                        font-weight: bold;
                        color: #222222;
                    }

                    .btn {
                        padding: 6rpx 20rpx;
                        background-color: #eeeeee;
                        color: #555555;
                        font-size: 24rpx;
                        border-radius: 50rpx;
                        margin-left: 40rpx;
                    }
                }
            }
        }
    }

    /* 订单明细 */
    .order-details {
        width: 100%;
        background-color: #ffffff;
        border-radius: 20rpx;
        margin: 20rpx auto;
        padding-bottom: 100rpx;

        .details-list {
            padding: 0 4%;

            .list {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 100%;
                height: 100rpx;
                border-bottom: 2rpx solid #f6f6f6;

                .title {
                    font-size: 26rpx;
                    color: #959595;
                }

                .price {
                    font-size: 26rpx;
                    font-weight: bold;
                }
            }

            .action {
                display: flex;
                align-items: center;
                justify-content: flex-end;

                .price {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: $base;
                }
            }
        }
    }

    .footer-btn {
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 100rpx;
        background-color: #ffffff;
        border-top: 2rpx solid #eeeeee;
        // padding: 0 4%;

        .del {
            // display: flex;
            // align-items: center;

            text {
                padding: 10rpx 30rpx;
                font-size: 24rpx;
                font-weight: bold;
            }
        }

        .btn {
            // display: flex;
            // align-items: center;
            margin-right: 30rpx;
            text {
                padding: 10rpx 30rpx;
                font-size: 24rpx;
                border: 2rpx solid #c0c0c0;
                border-radius: 100rpx;
                color: #c0c0c0;
                
            }

            .action {
                background-color: $base;
                color: #ffffff;
                border: 2rpx solid #ffffff;
            }
        }
    }
</style>